<template>
  <div class="dashboard-container">
     <button @click="changeDesc('bbbb')">修改desc</button>
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共166条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import?type=user')">导入</el-button>
          <el-button size="small" type="danger"  @click="exportAll">导出所有</el-button>
          <el-button size="small" type="primary"  :disabled="!checkPermission('employees-add')" @click="$refs.addEmployee.showDialog = true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card>
        <el-table border :data="list">
          <el-table-column label="序号" sortable type="index" />
          <el-table-column label="姓名" sortable prop="username" />
          <el-table-column label="头像" width="130px">
            <template slot-scope="{ row }">
              <img @click="showImg(row)" :src="row.staffPhoto" v-imageerror="require('@/assets/common/head.jpg')" style="height:100px;width:100px;" alt="">
            </template>
          </el-table-column>
          <el-table-column label="工号" sortable prop="workNumber" />
          <el-table-column label="聘用形式" sortable :formatter="formatterFormOfEmployment" />
          <el-table-column label="部门" sortable prop="departmentName" />
          <el-table-column label="入职时间" sortable>
            <template slot-scope="{ row }">
              {{ row.timeOfEntry | formatDate}}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" align="center" sortable="" prop="enableState">
            <template slot-scope="{ row }">
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable fixed="right" width="280" id="test-btn">
            <template slot-scope="{ row }" >
              <el-button type="text" size="small" :disabled="!checkPermission('employees-edit')" @click="$router.push('/employees/detail/'+row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="setRole(row)">角色</el-button>
              <el-button type="text" size="small" :disabled="!checkPermission('employees-del')" @click="deleteEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>

      <add-employee ref="addEmployee" @update-list="getEmployeeList" />
      <!-- ref的作用：获取DOM节点或者组件实例对象 -->
      <!-- 父组件可以通过ref 去获取到子组件实例对象，修改他的数据，调用他的方法 -->
      <!-- <组件 :自定义属性="数据变量" @update-自定义属性="数据变量=$event" /> -->
      <!-- <组件 :自定义属性.sync="数据变量"  /> -->
    </div>

    <el-dialog  title="预览" :visible.sync="isShow"  width="260px">
      <canvas id="canvas"></canvas>
    </el-dialog>

    <!-- 用户关联角色弹框 -->
    <assign-role ref="assign-role" />
    

  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import TypeObj from '@/api/constant/employees'
import AddEmployee from  './components/add-employee.vue'
import AssignRole from './components/assign-role.vue'
import QRCode from 'qrcode'
import list from '@/mixins/list'
export default {
  name:'Employess',
  mixins:[list],
  data() {
    return {
      loading: false,
      // list: [], // 接数据的
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      isShow:false,
      // desc:""  // 个性描述
    }
  },
  components: {
    AddEmployee,AssignRole
  },
  // created() {
  //   this.initData()
  // },
  methods: {
    // changeDesc(str){
    //   this.desc = str
    // },
    changePage(newPage) {
      this.page.page = newPage
      this.initData()
    },
    async initData() {
      this.loading = true
      const { total, rows } = await getEmployeeList(this.page)
      this.page.total = total
      this.list = rows

      this.loading = false
    },
    formatterFormOfEmployment(row, column, cellValue, index) {
      const flag = TypeObj.hireType.find(item => item.id === row.formOfEmployment)
      return flag ? flag.value : '未知'
    },
   async deleteEmployee(id) {
      try {
        await this.$confirm('您确定删除该员工吗')
        await delEmployee(id)
        this.initData()
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 导出所有
    exportAll(){
      // 表头对应关系
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 动态加载模块  import('模块路径')  返回的是promise
      import('@/vendor/Export2Excel').then(async excel=>{
        // excel.export_json_to_excel(配置项)   将json数据导出到excel里面
        // excel.export_json_to_excel({
        //   header:['姓名','年龄','性别'], // 表头
        //   data:[['zs',20,1],['ls',22,0],['ww',36,3]],  // 表格数据，是一个二维数组(数组的每个值也是数组)
        //   filename:'test表格',
        // })
        // 1. 准备好要导出的数据
         const {  rows } = await getEmployeeList({page:1,size:1000000})
        // 2. 要将导出的数据加工处理好，调用方法导出
        // ==>2.1 要处理数据
        const res =  this.formatJson(headers,rows)
        // ==>2.2 调用插件进行导出
        excel.export_json_to_excel({
          header:res.headerKey, // 表头
          data:res.arr,  // 表格数据，是一个二维数组(数组的每个值也是数组)
          filename:'员工数据',
          multiHeader:[['基本信息','','','','','','部门']],  // 复杂表头配置
          merges:['A1:F1','G1:G2']  // 合并规则
        })
      })
    },
    // 整理表格的数据
    formatJson(headers,rows){
      const headerKey = Object.keys(headers)
      const arr = []
      rows.forEach(item=>{
        // item 就是每个数据对象  {companyName:xxx,id:xxx,mobile:xxx,...}
        const itemArr = []
        headerKey.forEach(key=>{
          // key 是中文， headers[key] 是中文对应的英文    item[headers[key]]  每个中文键对应的值
          // 如果是入职时间或转正时间就要做一下处理
          if(['timeOfEntry','correctionTime'].includes(headers[key])){
            item[headers[key]] = new Date(item[headers[key]]).toLocaleDateString()
          }
          if(headers[key] === 'formOfEmployment'){
            const flag = TypeObj.hireType.find(val => val.id === item[headers[key]])
            item[headers[key]] =  flag ? flag.value : '未知'
          }
          itemArr.push(item[headers[key]])
        })
        arr.push(itemArr)
      })
      return {
        headerKey,arr
      }
    },
    // 显示图片
    showImg(row){
      if(!row.staffPhoto || !row.staffPhoto.trim()) return this.$message.warning('暂无图片')
      this.isShow = true  // el-dialog 是懒渲染的；页面第一次打开的时候里面的DOM节点不存在， 弹框打开之后才会去渲染
      // 我们的DOM渲染(宏任务)是耗时的，是异步的！ 所以我们不能直接修改状态或赋值之后获取最新DOM，应该在DOM渲染完成之后去获取
      // setTimeout  或者  使用 $nextTick
      this.$nextTick(_=>{
        console.log(document.getElementById('canvas'));
        QRCode.toCanvas(document.getElementById('canvas'),row.staffPhoto,error=>{
          console.log(error);
        })
      })
      // 场景： 
        //  1. 弹框 为true，立即获取里面DOM节点或者组件实例内容     $ref
        //  2. 列表渲染 或者 条件渲染  立即获取里面的DOM实例内容    $ref
    },
    // 用户关联角色
    async setRole(row){
      // 通过ref获取到子组件实例，修改他的属性; 调用他的方法
      await this.$refs['assign-role'].getUserRole(row.id)
      await this.$refs['assign-role'].getAllRoleList()
      this.$refs['assign-role'].showDialog = true
    }
  }
}
</script>
